<template>
  <div>
    <el-row>
      <el-col :span="3">
        1
        <div class="fixed-nav">
          <NavMenu></NavMenu>
        </div>
      </el-col>
      <el-col :span="21">
        <!-- 个人信息 -->
        <div class="user-info">
          <div class="avatar">
            <img
              :src="userInfo.avatar"
              alt="用户头像"
            >
          </div>
          <div class="info">
            <div class="nickname">{{userInfo.username}}</div>
            <div class="content">
              <ul>
                <li>关注 <b>{{userInfo.follow_count}}</b></li>
                <li>粉丝 <b>{{userInfo.fans_count}}</b></li>
                <li>获赞 <b>{{userInfo.like_count}}</b></li>
              </ul>
            </div>
            <div class="account">
              <ul>
                <li>账号:{{userInfo.uid}}</li>
                <li>性别：{{userInfo.sex}}</li>
              </ul>
            </div>
          </div>

        </div>

        <!-- 导航菜单 -->
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
          router
        >
          <el-menu-item index="/myvideo">作品</el-menu-item>
          <el-menu-item index="/liked">喜欢</el-menu-item>
          <el-menu-item index="/collected">收藏</el-menu-item>
        </el-menu>

        <!-- 视频展示 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-col>
    </el-row>

  </div>

</template>

<script>
import MyVideo from "@/views/MyVideo";
import Liked from "@/views/Liked";
import Collected from "@/views/Collected";
import NavMenu from "@/views/NavMenu";
export default {
  name: "myCenter",
  components: {
    MyVideo,
    Liked,
    Collected,
    NavMenu,
  },
  data() {
    return {
      activeIndex: "/myvideo",
      userInfo: {
        avatar:
          "http://s33iwztmt.hb-bkt.clouddn.com/default_avatar/894.png-avatar",
        uid: "moutong_.",
        username: "某彤",
        sex: "女",
        like_count: 319,
        follow_count: 43,
        fans_count: 4,
      },
    };
  },
};
</script>

<style scoped>
.user-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 200px;
}

.avatar {
  border-radius: 50%;
  height: 120px;
  overflow: hidden;
  margin-right: 40px;
}

.avatar img {
  height: 100%;
}

.nickname {
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 10px;
}

.content {
  margin-bottom: 10px;
}

.content ul,
.account ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

li {
  list-style: none;
  margin-right: 25px;
}

.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 12.5%;
}
</style>